<template>
  <div class="home">
    <header>
      <span @click="onClick" 
      style="color:white;font-size:12px;text-align:center">
      要想生活过得去，头上必须绿</span>
    </header>
    <section @scroll="onScroll">
      <main>
        <div v-for="(item, index) in datalist" :key="index">
          <img :src="item.productImage" alt="" />
          <p>{{ item.productName }}</p>
          <p>￥{{ item.salePrice }}</p>
          <button>加入购物车</button>
        </div>
      </main>
    </section>
    <footer>
      <footer v-show="islogading">
        <img src="../../public/9525ed4f1e541e9c669836fd0866f1ed.gif" alt="" />
      </footer>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datalist: [],
      islogading: false,
    };
  },
  mounted() {
    this.$axios.get("http://localhost:8080/data.json").then((res) => {

      this.datalist = res.data.result.list;
      // console.log(this.datalist);
    });
  },
  methods: {
    onClick(){
      this.$router.push('/about')
    },
    onScroll(event) {
      var clientHenght = event.target.clientHeight;
      console.log(clientHenght);

      var scrollHeight = event.target.scrollHeight;
      console.log(scrollHeight);

      var scrollTop = event.target.scrollTop;
      console.log(scrollTop);

      if (scrollHeight - scrollTop - clientHenght <= 1) {
        this.islogading = true;
        setTimeout(() => {
          this.$axios.get("http://localhost:8080/data2.json").then((res) => {
            res.data.result.list.forEach((item) => {
              this.datalist.push(item);
            });
          });
          this.islogading = false;
        }, 3000);
        setTimeout(() => {
          this.$axios.get("http://localhost:8080/data3.json").then((res) => {
            res.data.result.list.forEach((item) => {
              this.datalist.push(item);
            });
          });
          this.islogading = false;
        }, 5000);
        if (this.datalist.length >= 16) {
          alert("到底了");
          return false;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
header {
  width: 100vw;
  height: 10vh;
  background: rgb(208, 255, 204);
}
section {
  width: 100vw;
  height: 80vh;
  background: rgb(173, 173, 173);
  box-sizing: border-box;
  border-bottom: none;
  overflow: auto;
  main {
    width: 100%;
        display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    background: #f5f5f5;
    > div {
      width: 21%;
      padding: 8px;
      margin: 8px 15px;
      box-sizing: border-box;
      cursor: pointer;
      > img {
        width: 100%;
      }
    }
  }
}
footer {
  width: 100vw;
  height: 10vh;
  background: rgb(187, 187, 187);
  img{
    width: 40%;
    height: 100%;
  }
}
</style>